// 大屏适配方案：基于1920x1080基础尺寸的响应式缩放
// 定义基础比例变量，可快速切换不同分辨率适配
$scale: screen.$screen-scale; // 4K: 2, 1080P: 1, 2K: 1.5 等

// 基础尺寸定义 (1920x1080标准)
$base-width: screen.$screen-base-width;
$base-height: screen.$screen-base-height;
$base-header-height: 72px;

// 计算函数：用于计算缩放后的尺寸
@function scale-size($size) {
    @return $size * $scale;
}

// 定义CSS变量
:root {
    // 缩放比例 (JS可运行时修改此变量实现动态缩放)
    --big-screen-scale: #{$scale};

    // 屏幕尺寸
    --big-screen-width: #{$base-width * $scale};
    --big-screen-height: #{$base-height * $scale};

    // 基础布局尺寸
    --big-header-height: #{screen.scale-size($base-header-height)};
    --big-left-right-width: #{screen.scale-size(460px)};
    --big-padding-horizontal: #{screen.scale-size(20px)};

    // 间距尺寸
    --big-padding-16: #{screen.scale-size(16px)};
    --big-padding-20: #{screen.scale-size(20px)};
    --big-margin-20: #{screen.scale-size(20px)};
    --big-gap-small: #{screen.scale-size(20px)};

    // 字体大小
    --big-font-size: #{screen.scale-size(14px)};
    --big-font-title: #{screen.scale-size(30px)};
    --big-font-subtitle: #{screen.scale-size(15px)};

    // 图标和边框
    --big-icon-size: #{screen.scale-size(30px)};
    --big-icon-margin: #{screen.scale-size(16px)};
    --big-border-width: #{screen.scale-size(3px)};

    // 颜色变量 (默认暗色主题)
    --big-block-bg: #222733;
    --big-screen-bg: rgb(22, 21, 34);
    --big-screen-text-color: #fff;
}

// 大屏容器样式
.big-screen-container {
    position: relative;
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-size: 100% 100%;
    overflow: hidden;
    font-size: var(--big-font-size);
    background: var(--big-screen-bg);
    color: var(--big-screen-text-color);
}
// 亮色主题变量覆盖
.light {
    --big-screen-bg: rgb(238, 238, 238);
    --big-block-bg: #fff;
    --big-screen-text-color: rgb(22, 21, 34);
}

// 大屏主体布局
.big-screen {
    position: absolute;
    user-select: none;
    top: 50%;
    left: 50%;
    width: var(--big-screen-width);
    height: var(--big-screen-height);
    // 使用CSS变量计算居中定位
    margin-left: calc(var(--big-screen-width) * 0.5 - var(--big-screen-width));
    margin-top: calc(var(--big-screen-height) * 0.5 - var(--big-screen-height));

    background-size: 100% 100%;
    padding: 0 var(--big-padding-horizontal);

    // 主内容区
    &-main {
        position: relative;
        display: flex;
        height: calc(100% - var(--big-header-height));
    }

    // 中央区域
    &-center {
        flex: 1;
        width: calc(
            var(--big-screen-width) - var(--big-left-right-width) * 2 - var(
                    --big-padding-horizontal
                ) * 2
        );
    }

    // 左右侧边区域
    &-left,
    &-right {
        width: var(--big-left-right-width);
    }
}
